<template>
  <div>
    <!-- 外层容器 -->
    <el-container>
      <!-- 上半区域：顶栏 -->
      <el-header class="layout-header">
        <!-- 顶栏右侧的当前用户信息及下拉菜单 -->
        <div class="login-user">
          <span class="welcome">欢迎回来，<b>{{ loginInfo.username }}</b>！</span>
          <el-dropdown @command="handleCommand">
            <el-avatar shape="square" size="medium" :src="loginInfo.avatar"></el-avatar>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item icon="el-icon-document" command="openEditInfoDialog">修改资料</el-dropdown-item>
              <el-dropdown-item icon="el-icon-coordinate" command="openEditAvatarDialog">修改头像</el-dropdown-item>
              <el-dropdown-item icon="el-icon-lock" command="openEditPasswordDialog">修改密码</el-dropdown-item>
              <el-dropdown-item icon="el-icon-right" divided command="openLogoutConfirm">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <!-- 顶栏的标题文字 -->
        <h1>学茶商城运营管理平台</h1>
      </el-header>
      <!-- 下半区域 -->
      <el-container class="layout-body">
        <!-- 下半区域的左侧边栏 -->
        <el-aside class="layout-aside">
          <el-menu
              router
              :default-active="activeMenuItemPath"
              class="el-menu-vertical-demo"
              background-color="#3a4856"
              text-color="#fff"
              active-text-color="#fff">
            <!-- 主页 -->
            <el-menu-item index="/">
              <i class="el-icon-s-home"></i>
              <span>主页</span>
            </el-menu-item>
            <!-- 账号管理 -->
            <el-submenu index="2" v-if="loginInfo.authorities.includes('/account/user/query')">
              <template slot="title">
                <i class="el-icon-s-check"></i>
                <span>账号管理</span>
              </template>
              <el-menu-item index="/admin/account/user">
                <i class="el-icon-user-solid"></i>
                <span slot="title">用户管理</span>
              </el-menu-item>
              <el-menu-item index="/admin/account/login-log">
                <i class="el-icon-s-operation"></i>
                <span slot="title">登录日志</span>
              </el-menu-item>
            </el-submenu>
            <!-- 内容管理 -->
            <el-submenu index="3">
              <template slot="title">
                <i class="el-icon-s-management"></i>
                <span>内容管理</span>
              </template>
              <el-menu-item index="/admin/content/category">
                <i class="el-icon-s-grid"></i>
                <span slot="title">类别管理</span>
              </el-menu-item>
              <el-menu-item index="/admin/content/article">
                <i class="el-icon-s-order"></i>
                <span slot="title">文章管理</span>
              </el-menu-item>
              <el-menu-item index="/admin/content/check-log/article">
                <i class="el-icon-s-operation"></i>
                <span slot="title">文章审核日志</span>
              </el-menu-item>
              <el-menu-item index="/admin/content/comment">
                <i class="el-icon-s-comment"></i>
                <span slot="title">评论管理</span>
              </el-menu-item>
              <el-menu-item index="/admin/content/check-log/comment">
                <i class="el-icon-s-operation"></i>
                <span slot="title">评论审核日志</span>
              </el-menu-item>
            </el-submenu>
            <!-- 商城管理 -->
            <el-submenu index="4">
              <template slot="title">
                <i class="el-icon-s-shop"></i>
                <span>商城管理</span>
              </template>
              <el-menu-item index="/admin/mall/category">
                <i class="el-icon-s-grid"></i>
                <span slot="title">类别管理</span>
              </el-menu-item>
              <el-menu-item index="/admin/mall/goods">
                <i class="el-icon-s-goods"></i>
                <span slot="title">商品管理</span>
              </el-menu-item>
              <el-menu-item index="/admin/mall/check-log/goods">
                <i class="el-icon-s-operation"></i>
                <span slot="title">商品审核日志</span>
              </el-menu-item>
              <el-menu-item index="/admin/mall/comment">
                <i class="el-icon-s-comment"></i>
                <span slot="title">评论管理</span>
              </el-menu-item>
              <el-menu-item index="/admin/mall/check-log/comment">
                <i class="el-icon-s-operation"></i>
                <span slot="title">评论审核日志</span>
              </el-menu-item>
            </el-submenu>
            <!-- 其它 -->
            <el-submenu index="5">
              <template slot="title">
                <i class="el-icon-s-cooperation"></i>
                <span>其它</span>
              </template>
              <el-menu-item index="/admin/other/echarts-demo">
                <i class="el-icon-s-marketing"></i>
                <span slot="title">ECharts演示</span>
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <!-- 下半区域的右侧主体 -->
        <el-main class="layout-main">
          <!-- 将由其它视图组件来负责此处的显示 -->
          <div class="body">
            <router-view/>
          </div>
          <!-- 版权信息 -->
          <div class="copyright">
            <p>Copyright &copy; 达内时代科技集团 - IT学院 - Java教学研发部</p>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style>
body {
  margin: 0;
}

.layout-header {
  background: #28292e;
}

.layout-header .login-user {
  float: right;
  margin-top: 12px;
  display: flex;
}

.layout-header .login-user .welcome {
  line-height: 36px;
  color: #fff;
  margin-right: 10px;
}

.layout-header h1 {
  margin: 0;
  color: #fff;
  line-height: 60px;
  font-size: 20px;
}

.layout-body {
  position: absolute;
  top: 60px;
  bottom: 0;
  left: 0;
  right: 0;
}

.layout-aside {
  background: #3a4856;
}

.layout-aside .el-menu {
  border: 0;
}

.layout-aside i {
  color: #fff !important;
}

.layout-main {
  background: #f2f4f9;
}

.layout-main .body {
  background: #fff;
  padding: 30px 30px 10px 30px;
}

.layout-main .copyright {
  width: 600px;
  margin: 0 auto;
  padding: 10px;
}

.layout-main .copyright p {
  margin: 0;
  padding: 0;
  text-align: center;
  font-size: 12px;
  color: #9e9e9f;
}

.el-menu-item.is-active {
  background: #405872 !important;
}
</style>

<script>
export default {
  data() {
    return {
      loginInfo: {
        username: '',
        avatar: '',
        authorities: []
      },
      activeMenuItemPath: ''
    }
  },
  methods: {
    // 处理点击头像的下拉菜单项
    handleCommand(command) {
      if (command == 'openEditInfoDialog') {
        this.openEditInfoDialog();
      } else if (command == 'openEditAvatarDialog') {
        this.openEditAvatarDialog();
      } else if (command == 'openEditPasswordDialog') {
        this.openEditPasswordDialog();
      } else if (command == 'openLogoutConfirm') {
        this.openLogoutConfirm();
      }
    },
    // 打开编辑对话框【未实现】
    openEditInfoDialog() {
      let title = '提示';
      let message = '您正在尝试修改当前登录的【' + this.loginInfo.username + '】的【基本资料】，抱歉，此功能尚未实现……';
      this.$alert(message, title, {
        confirmButtonText: '确定',
        callback: action => {
        }
      });
    },
    // 打开修改头像对话框【未实现】
    openEditAvatarDialog() {
      let title = '提示';
      let message = '您正在尝试修改当前登录的【' + this.loginInfo.username + '】的【头像】，抱歉，此功能尚未实现……';
      this.$alert(message, title, {
        confirmButtonText: '确定',
        callback: action => {
        }
      });
    },
    // 打开修改密码对话框【未实现】
    openEditPasswordDialog() {
      let title = '提示';
      let message = '您正在尝试修改当前登录的【' + this.loginInfo.username + '】的【密码】，抱歉，此功能尚未实现……';
      this.$alert(message, title, {
        confirmButtonText: '确定',
        callback: action => {
        }
      });
    },
    // 打开登出确认框
    openLogoutConfirm() {
      let message = '即将退出登录，是否继续？';
      this.$confirm(message, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.handleLogout();
      }).catch(() => {
      });
    },
    // 处理登出
    handleLogout() {
      let url = this.BaseUrl.PASSPORT + '/passport/logout';
      console.log('url = ' + url);

      this.TokenAxios.post(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.$message({
            message: '退出登录成功！',
            type: 'success'
          });
          localStorage.removeItem('loginInfo');
          this.$router.push('/login');
        } else {
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      }).catch(error => {
        let title = '错误';
        let message = '程序执行过程中出现错误，请打开浏览器的控制台查看详细错误信息！';
        this.$alert(message, title, {
          confirmButtonText: '确定',
          callback: action => {
          }
        });
        console.log(error);
      });
    },
    // 加载当前登录的用户信息
    loadCurrentLoginInfo() {
      let loginInfoString = localStorage.getItem('loginInfo');
      if (!loginInfoString) {
        this.$router.push('/login');
        return;
      }
      this.loginInfo = JSON.parse(loginInfoString);
    },
    // 处理激活某个菜单项
    handleActiveMenuItem() {
      let path = this.$router.currentRoute.path;
      if (path.startsWith('/admin/index')) {
        path = '/';
      }
      if (path.startsWith('/admin/account/user')) {
        path = '/admin/account/user';
      }
      if (path.startsWith('/admin/content/category')) {
        path = '/admin/content/category';
      }
      if (path.startsWith('/admin/content/article')) {
        path = '/admin/content/article';
      }
      if (path.startsWith('/admin/content/comment')) {
        path = '/admin/content/comment';
      }
      if (path.startsWith('/admin/mall/category')) {
        path = '/admin/mall/category';
      }
      if (path.startsWith('/admin/mall/goods')) {
        path = '/admin/mall/goods';
      }
      if (path.startsWith('/admin/mall/comment')) {
        path = '/admin/mall/comment';
      }
      this.activeMenuItemPath = path;
    }
  },
  created() {
  },
  mounted() {
    this.handleActiveMenuItem();
    this.loadCurrentLoginInfo();
  }
}
</script>